<script lang="ts" setup>
import "@/utils/rem"
import { ref } from "vue"
import { useRouter } from "vue-router"
import { getComboDetail, postRemark } from "@/api/hr"

const router = useRouter()
const uid = ref<any>(router.currentRoute.value.query.uid) //简历ID
const remark = ref<any>(router.currentRoute.value.query.verification) //验证是否有备注权限
const BASEURL = `${import.meta.env.VITE_BASE_API}/image/` // 图片
const data = ref<any>()
/**人事备注 */
import { showToast } from "vant"

const hrRemark = ref<string>("")
const onSubmit = async () => {
  postRemark({
    id: uid.value,
    remark: hrRemark.value
  }).then((res: any) => {
    if (res.code == 200) {
      showToast("备注成功")
    }
  })
}
/**根据id查详情 */
const getProductInfo = async () => {
  await getComboDetail({
    // id: "8080518567861686501376"
    id: uid.value
  }).then((res: any) => {
    if (res.code == 200) {
      data.value = res.data[0]
      hrRemark.value = res.data[0].remark
      // 图片
      if (res.data[0].img) {
        data.value.img = `${BASEURL}${res.data[0].img}`
      }
    }
  })
}
getProductInfo()
</script>
<template>
  <div class="box">
    <!-- 背景图 -->
    <img style="width: 100%" src="@/assets/layout/Group3.png" />
    <!-- 图片 -->
    <div class="box-img">
      <el-image
        class="box-img"
        fit="cover"
        v-if="!data?.img && data?.sex === '女'"
        src="http://fansitexitong.cn/images/gril.png"
        alt=""
      />
      <el-image
        class="box-img"
        fit="cover"
        v-else-if="!data?.img && data?.sex === '男'"
        src="http://fansitexitong.cn/images/boy.png"
        alt=""
      />
      <el-image class="box-img" fit="cover" v-else :src="`${data?.img}`" alt="" />
    </div>
    <!-- 名字信息 -->
    <div class="box-name">
      <div style="height: 100%">
        <p style="padding-top: 0.3rem; font-weight: 700">{{ data?.name }}</p>
        <p>
          <span>{{ data?.sex }}</span
          ><span style="margin-left: 0.4rem">{{ data?.birthday }}</span>
        </p>
        <p>
          <span style="margin-right: 0.2rem; color: #ccc">面试岗位</span
          ><span style="color: blue"> {{ data?.works }} </span>
        </p>
        <p>
          <span style="margin-right: 0.2rem; color: #ccc">期望薪资</span
          ><span style="color: blue"> {{ data?.hopeSalary }} </span>
        </p>
      </div>
    </div>
    <!-- 基本信息卡片 -->
    <div class="box-card">
      <p class="box-card-border">基本信息</p>
      <div class="box-card-text">
        <div style="margin-bottom: 0.2rem">
          <span>政治面貌：{{ data?.politics }}</span>
          <span style="padding-left: 2rem">婚姻状况：{{ data?.marriage }}</span>
        </div>
        <div>
          <span>户籍：{{ data?.register }}</span>
        </div>
        <div>
          <p>联系方式：{{ data?.phone }}</p>
        </div>
        <div>
          <p>现居住地：{{ data?.register }}</p>
        </div>
      </div>
    </div>
    <!-- 个人优势卡片 -->
    <div class="box-card">
      <p class="box-card-border">个人优势</p>
      <div class="box-card-text">
        <div style="margin-bottom: 0.2rem">
          <p>{{ data?.advantage }}</p>
        </div>
      </div>
    </div>
    <!-- 工作经历卡片 -->
    <div class="box-card">
      <p class="box-card-border">工作经历</p>
      <div class="box-card-text">
        <div style="display: flex; justify-content: space-between">
          <div>{{ data?.jobCompany }}</div>
          <div>{{ data?.jobStartDate }}-{{ data?.jobEndDate }}</div>
        </div>

        <div style="color: #bbb; margin-top: 0.2rem">
          {{ data?.jobWorks }}
        </div>
      </div>
    </div>
    <!-- 教育经历卡片 -->
    <div class="box-card">
      <p class="box-card-border">教育经历</p>
      <div class="box-card-text">
        <div style="margin-bottom: 0.2rem">
          <p>{{ data?.schoolName }}</p>
        </div>
        <div style="color: #bbb; margin-top: 0.2rem">{{ data?.startDate }}-{{ data?.endDate }}</div>
        <div style="margin-top: 0.2rem">{{ data?.specialty }} {{ data?.education }}</div>
      </div>
    </div>
    <!-- 教育经历卡片 -->
    <div class="box-card">
      <p class="box-card-border">排序</p>
      <div class="box-card-text">
        <P style="font-size: 14px; margin-left: 16px; vertical-align: middle; color: #979797"
          >A无责底薪 B提成奖金 C五险一金 D工作氛围 E办公环境</P
        >
        <P style="font-size: 14px; margin-left: 16px; vertical-align: middle; color: #979797"
          >F晋升空间 G主管工作方式 H能力提升 I行业前景</P
        >
        <P style="font-size: 14px; margin-left: 16px; vertical-align: middle; color: #979797">J公司资历与发展</P>
        <P style="font-size: 14px; margin-left: 16px; vertical-align: middle">{{ data?.orderBys }}</P>
      </div>
    </div>
    <!-- 人事备注 -->
    <div class="box-card" v-if="remark === 'remark'">
      <p class="box-card-border">备注</p>
      <div class="box-card-text">
        <van-form @submit="onSubmit">
          <van-field
            label-align="top"
            v-model="hrRemark"
            name="姓名"
            size="small"
            required
            placeholder="请填写备注"
            rows="2"
            autosize
            type="textarea"
            maxlength="200"
            show-word-limit
          />
          <van-button
            style="position: fixed; bottom: 0; left: 50%; margin-left: -3.75rem; border-radius: 0; width: 7.5rem"
            type="primary"
            block
            native-type="submit"
            >提交</van-button
          >
        </van-form>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box {
  position: relative;
  background-color: #f1f3f8;
  width: 7.5rem;
  margin: 0 auto;
  padding-bottom: 1rem;
}
.box-img {
  width: 2rem;
  height: 2.2rem;
  position: absolute;
  top: 0.3rem;
  left: 0.2rem;
  z-index: 9;
}
.box-name {
  margin-top: -0.6rem;
  height: 2rem;
  background-color: #fff;
  padding-left: 2.7rem;
  font-size: 0.2rem;
  border-radius: 0.1rem;
}
.box-card {
  background-color: #fff;
  margin: 0.2rem;
  font-size: 0.2rem;
  border-radius: 0.1rem;
  padding-bottom: 0.1rem;
}
.box-card-border {
  position: relative;
  padding: 0.2rem 0.2rem 0 0.2rem;
}
.box-card-text {
  margin: 0 0.3rem 0.3rem 0.3rem;
}
.box-card-border::after {
  content: ""; /* 伪元素必需属性 */
  position: absolute; /* 绝对定位 */
  top: 0.23rem; /* 控制竖线起始位置（可调整） */
  left: 0; /* 右侧对齐 */
  width: 0.05rem; /* 边框粗细 */
  height: 40%; /* 竖线高度（占父元素的80%） */
  background: blue; /* 边框颜色 */
  transform: translateY(-10%); /* 微调垂直位置（与top配合居中） */
}
</style>
